<template>
  <div class="mainCon">
    <div class="mainConHeader">
      <div class="mainConHeaderContent"></div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="commonTab"
      >
        <el-tab-pane
          :label="item.label"
          :name="item.id"
          v-for="item in list"
          :key="item.id"
        ></el-tab-pane>
      </el-tabs>
      <div class="returnData">
        <el-link
          type="primary"
          @click="downLoad"
          v-if="
            activeName == '2' &&
            $store.state.userType == 'BANK' &&
            bankSalaryImport
          "
          >回传代发数据导入模板下载</el-link
        >
      </div>
      <keep-alive>
        <component
          v-bind:is="currentTabComponent"
          :taskType="taskType"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import salaryPayList from './salaryPayList'
import payrollList from './payrollList'
import common from '../../kits/common'

export default {
  name: 'salaryPayListTab',
  components: {
    salaryPayList,
    payrollList,
  },
  props: ['taskType'],
  data() {
    return {
      titleText: '工资代发',
      activeName: '1',
      list: [
        {
          id: '1',
          label: '项目维度',
        },
        {
          id: '2',
          label: '工资表维度',
        },
      ],
      currentTabComponent: 'salaryPayList',
      bankSalaryImport: false,
    }
  },
  created() {
    if (this.$route.query.tab) {
      this.currentTabComponent = this.$route.query.tab
      this.taskType = this.$route.query.taskType || this.taskType
      this.activeName = this.$route.query.tab == 'salaryPayList' ? '1' : '2'
    }
    this.getBankSalaryDetail()
  },
  watch: {
    $route(to, from) {
      if (this.$route.query.tab) {
        this.taskType = this.$route.query.taskType || this.taskType
        this.currentTabComponent = this.$route.query.tab
        this.activeName = this.$route.query.tab == 'salaryPayList' ? '1' : '2'
      }
    },
  },
  methods: {
    //tabs栏切换
    handleClick(tab, event) {
      if (this.activeName == 1) {
        this.currentTabComponent = salaryPayList
      } else if (this.activeName == 2) {
        this.currentTabComponent = payrollList
      }
    },
    downLoad() {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/findurl',
        data: {
          name: 'bankSalary',
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              window.open(response.data.result.url)
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg,
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //工资流水
    getBankSalaryDetail() {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/findbyname',
        data: {
          name: 'bankSalaryDetail',
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            if (res.data.result.value == '1') {
              this.bankSalaryImport = true
            } else {
              this.bankSalaryImport = false
            }
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '数据请求失败，请重试',
            type: 'error',
          })
        })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 132px;
  padding: 0;
  &Header {
    position: relative;
    &Content {
      position: absolute;
      left: 130px;
      z-index: 100;
      font-size: 12px;
      color: #666666;
    }
  }
  .topConStyle {
    margin: 0 !important;
  }
}
.returnData {
  position: absolute;
  right: 24px;
  top: 16px;
}
</style>
